<template>
    <div id="room_list">
        <div style="margin-top: 20px;margin-bottom: 20px;text-align: right;">
            <el-button type="primary" @click="menu_action('新增')">新增</el-button>
            <el-button type="primary" :disabled="(multipleSelection.length>0?false:'disabled')" @click="menu_action('批量删除')">批量删除</el-button>
            <el-button type="primary" @click="reload_data()">刷新</el-button>
        </div>
        <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" header-cell-class-name="header-row" max-height="800">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="大楼名称">
                <template slot-scope="scope">{{ scope.row.building_name }}</template>
            </el-table-column>
            <el-table-column label="单元" width="100">
                <template slot-scope="scope">{{ scope.row.unit_name }}</template>
            </el-table-column>
            <el-table-column label="楼层编号" width="100">
                <template slot-scope="scope">{{ scope.row.floor_name }}</template>
            </el-table-column>
            <el-table-column label="房间编号" width="100">
                <template slot-scope="scope">{{ scope.row.room_number }}</template>
            </el-table-column>
            <el-table-column label="房间名称" width="100">
                <template slot-scope="scope">{{ scope.row.room_note }}</template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="row_btn_click(scope.row,'删除')" type="text" size="small">删除</el-button>
                    <el-button @click="row_btn_click(scope.row,'编辑')" type="text" size="small">编辑</el-button>
                    <el-button @click="row_btn_click(scope.row,'设备')" type="text" size="small">设备</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 弹出窗口 -->
        <el-dialog :title="addForm.form_title" :visible.sync="addDialogFormVisible">
            <el-form :model="addForm">
                <el-form-item label="大楼名称" :label-width="formLabelWidth">
                    <div>
                        <el-autocomplete class="inline-input" v-model="addForm.building_name" :fetch-suggestions="querySearch_lib_building_name" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
                    </div>
                </el-form-item>
                <el-form-item label="单元" :label-width="formLabelWidth">
                    <div>
                        <el-autocomplete class="inline-input" v-model="addForm.unit_name" :fetch-suggestions="querySearch_lib_unit_name" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
                    </div>
                </el-form-item>
                <el-form-item label="楼层编号" :label-width="formLabelWidth">
                    <div>
                        <el-autocomplete class="inline-input" v-model="addForm.floor_name" :fetch-suggestions="querySearch_lib_floor_name" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
                    </div>
                </el-form-item>
                <el-form-item label="房间编号" :label-width="formLabelWidth">
                    <el-input v-model="addForm.room_number" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="房间名称" :label-width="formLabelWidth">
                    <el-input v-model="addForm.room_note" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add_form_submit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style>
.el-table .header-row {
    background: #f5f7fa;
}
</style>
<script>
export default {
    data() {
        return {
            tableData: [
                // {
                //     building_name: '芙蓉国际大厦',
                //     unit_name: '芙蓉国际3单元',
                //     floor_name: '4楼',
                //     room_number: '204',
                //     room_note: '经理办公室'
                // }
            ],
            multipleSelection: [],
            addDialogFormVisible: false,
            formLabelWidth: '120px',
            addForm: {
                form_title: '',
                id: 0,
                building_name: '',
                unit_name: '',
                floor_name: '',
                room_number: '',
                room_note: '',
            },
            lib_building_name: [],
            lib_unit_name: [],
            lib_floor_name: [],
            lib_room_number: [],
            hasSelected: true
        }
    },
    methods: {
        querySearch_lib_building_name(queryString, cb) {
            console.log("querySearch=", queryString, cb)
            var restaurants = this.lib_building_name;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            cb(results);
        },
        querySearch_lib_unit_name(queryString, cb) {
            console.log("querySearch=", queryString, cb)
            var restaurants = this.lib_unit_name;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            cb(results);
        },
        querySearch_lib_floor_name(queryString, cb) {
            console.log("querySearch=", queryString, cb)
            var restaurants = this.lib_floor_name;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item) {
            console.log(item);
        },
        handleClick(row) {
            console.log(row);
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        reload_data() {
            let vm = this
            vm.ajaxPost('/api/room_list', {}, function(response) {
                if (response.status == 200) {
                    if (response.data.code == 1) {
                        let data = response.data.data;
                        vm.tableData = data;
                    } else {
                        vm.msgboxEx('登录失败', 'error')
                    }
                }
            }, function(error) {
                console.log(error);
            })
        },
        reload_base() {
            let vm = this
            vm.ajaxPost('/api/room_base', {}, function(response) {
                if (response.status == 200) {
                    if (response.data.code == 1) {
                        let data = response.data.data
                        vm.lib_building_name = data.building_name_lib
                        vm.lib_unit_name = data.unit_name_lib
                        vm.lib_floor_name = data.floor_name_lib
                    } else {}
                }
            }, function(error) {
                console.log(error);
            })
        },
        add_form_submit() {
            let vm = this
            if (vm.isEmpty(vm.addForm.building_name)) {
                vm.msgboxEx('建筑名称不能为空', 'error')
            }
            if (vm.isEmpty(vm.addForm.unit_name)) {
                vm.msgboxEx('单元不能为空', 'error')
            }
            if (vm.isEmpty(vm.addForm.floor_name)) {
                vm.msgboxEx('楼层不能为空', 'error')
            }
            if (vm.isEmpty(vm.addForm.room_number)) {
                vm.msgboxEx('房间号不能为空', 'error')
            }
            if (vm.isEmpty(vm.addForm.room_note)) {
                vm.addForm.room_note = "-"
            }
            if (vm.addForm.id > 0) {
                vm.ajaxPost('/api/update_room', {
                    id: this.addForm.id,
                    building_name: this.addForm.building_name,
                    unit_name: this.addForm.unit_name,
                    floor_name: this.addForm.floor_name,
                    room_number: this.addForm.room_number,
                    room_note: this.addForm.room_note,
                }, function(response) {
                    if (response.status == 200) {
                        if (response.data.code == 1) {
                            vm.addDialogFormVisible = false
                            vm.msgboxEx('添加成功', 'success')
                            vm.reload_data();
                            vm.reload_base();
                        } else {
                            vm.msgboxEx('添加失败', 'error')
                        }
                    }
                }, function(error) {
                    console.log(error);
                })

            } else {
                vm.ajaxPost('/api/add_room', {
                    building_name: this.addForm.building_name,
                    unit_name: this.addForm.unit_name,
                    floor_name: this.addForm.floor_name,
                    room_number: this.addForm.room_number,
                    room_note: this.addForm.room_note,
                }, function(response) {
                    if (response.status == 200) {
                        if (response.data.code == 1) {
                            vm.addDialogFormVisible = false
                            vm.msgboxEx('添加成功', 'success')
                            vm.reload_data();
                            vm.reload_base();
                        } else {
                            vm.msgboxEx('添加失败', 'error')
                        }
                    }
                }, function(error) {
                    console.log(error);
                })
            }
        },
        menu_action(kName) {
            let vm = this
            if (kName == '新增') {
                this.addForm.id = 0
                this.addForm.form_title = '添加房间信息'
                this.addForm.room_number = ''
                this.addForm.room_note = ''
                this.addDialogFormVisible = true
            } else if (kName == '编辑') {
                this.addForm.form_title = '编辑房间信息'
                this.addDialogFormVisible = true
            } else if (kName == '批量删除') {
                let len = vm.multipleSelection.length
                if (len > 0) {
                    vm.confirm('确定删除选中的' + len + '条数据?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let ids = ''
                        for (let item of vm.multipleSelection) {
                            if (ids == '') {
                                ids = ids + item.id
                            } else {
                                ids = ids + ',' + item.id
                            }
                        }
                        vm.ajaxPost('/api/delete_room', {
                            ids: ids,
                        }, function(response) {
                            if (response.status == 200) {
                                if (response.data.code == 1) {
                                    vm.msgboxEx('删除成功', 'success')
                                    vm.reload_data()
                                } else {
                                    vm.msgboxEx('删除失败', 'error')
                                }
                            }
                        }, function(error) {
                            console.log(error);
                        })
                    }).catch(() => {

                    });



                }
            }
        },
        row_btn_click(row, kName) {
            let vm = this
            if (kName == '编辑') {
                this.addForm.id = row.id
                this.addForm.building_name = row.building_name
                this.addForm.unit_name = row.unit_name
                this.addForm.floor_name = row.floor_name
                this.addForm.room_number = row.room_number
                this.addForm.room_note = row.room_note
                this.addForm.form_title = '编辑房间信息'
                this.addDialogFormVisible = true
            } else if (kName == '删除') {
                vm.confirm('确定删除该房间信息?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    vm.ajaxPost('/api/delete_room', {
                        id: row.id,
                    }, function(response) {
                        if (response.status == 200) {
                            if (response.data.code == 1) {
                                vm.msgboxEx('删除成功', 'success')
                                vm.reload_data()
                            } else {
                                vm.msgboxEx('删除失败', 'error')
                            }
                        }
                    }, function(error) {
                        console.log(error);
                    })
                }).catch(() => {

                });
            } else if (kName == '设备') {
                let device_ids = row.device_ids; //弹出框，编辑。多个以逗号分隔
                vm.$prompt('编辑房间内设备编号(逗号分割)', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputValue: device_ids
                }).then(({ value }) => {
                    //设置房间内设备信息
                    vm.ajaxPost('/api/update_room_info', {
                        id:row.id,
                        device_ids: value,
                    }, function(response) {
                        if (response.status == 200) {
                            if (response.data.code == 1) {
                                vm.msgboxEx('更新成功', 'success')
                                vm.reload_data()
                            } else {
                                vm.msgboxEx('更新失败', 'error')
                            }
                        }
                    }, function(error) {
                        console.log(error);
                    })

                })
            }
        }
    },
    computed: {
        // hasSelected(){
        //     return false
        //     // return (this.multipleSelection.length > 0)
        // }
    },
    mounted: function() {
        this.reload_data()
        this.reload_base()
    }
}
</script>
